import { MessageOutlined, PlayCircleOutlined, UserOutlined, ReadOutlined, EnvironmentOutlined, FilePdfOutlined } from '@ant-design/icons'
import './index.scss'
import type { MenuProps } from 'antd'
import Loading from '@/component/loading/loading'
import { Menu } from 'antd'
import React, { Suspense } from 'react'
import MenuHeader from './header/header'
import { Outlet, useNavigate } from 'react-router-dom'
import { TMenuRoute } from '../../Type/type'

type MenuItem = Required<MenuProps>['items'][number]

function getItem(label: React.ReactNode, key: React.Key, icon?: React.ReactNode, children?: MenuItem[], type?: 'group'): MenuItem {
  return {
    key,
    icon,
    children,
    label,
    type
  } as MenuItem
}

const items: MenuProps['items'] = [
  getItem('用户', 'sub1', <UserOutlined />, [getItem('用户管理', '1')]),
  getItem('博客', 'sub2', <ReadOutlined />, [
    getItem('博客管理', '2'),
    // getItem('博客写作', '3'),
    getItem('博客图表', '4'),
    getItem('写作图表', '10'),
    getItem('博客写作(qiankun)', '11'),
    getItem('博客管理(qiankun)', '12')
  ]),
  getItem('留言', 'sub3', <MessageOutlined />, [getItem('留言管理', '5')]),
  getItem('视频', 'sub4', <PlayCircleOutlined />, [getItem('视频管理', '6'), getItem('视频添加', '7')]),
  getItem('导航', 'sub5', <EnvironmentOutlined />, [getItem('导航管理', '8')]),
  getItem('Pdf', 'sub6', <FilePdfOutlined />, [getItem('Pdf管理', '9')]),
  getItem('图库', 'sub7', <FilePdfOutlined />, [getItem('图库管理', '13')]),
  getItem('友链', 'sub8', <FilePdfOutlined />, [getItem('友链管理', '14')])
]

const Index: React.FC = () => {
  const Navigate = useNavigate()
  const onClick: MenuProps['onClick'] = (e) => {
    const routerMenu: TMenuRoute = {
      '1': '/index/user',
      '2': '/index/blog',
      // '3': '/index/write',
      '4': '/index/blogChart',
      '5': '/index/message',
      '6': '/index/video',
      '7': '/index/videoAdd',
      '8': '/index/nav',
      '9': '/index/pdf',
      '10': '/index/writeChart',
      '11': '/index/writeQK',
      '12': '/index/blogManage',
      '13': '/index/picture',
      '14': '/index/links'
    }
    Navigate(routerMenu[e.key])
  }

  return (
    <div>
      <MenuHeader></MenuHeader>
      <div className="menu">
        <Menu
          onClick={onClick}
          theme="dark"
          style={{ width: 156 }}
          className="menu-list"
          defaultSelectedKeys={['1']}
          // defaultOpenKeys={['sub1']}
          mode="inline"
          items={items}
        />
        <div className="menu-content">
          <Suspense fallback={<Loading></Loading>}>
            <Outlet></Outlet>
            {/* <div id="container"></div> */}
          </Suspense>
        </div>
      </div>
    </div>
  )
}

export default Index
